<template>
  <div id="app">
      <router-view></router-view>
      <transition name="side">
          <side-menu v-show="isShow" @hidemenu="isShow=false;"></side-menu>
      </transition>
  </div>
</template>

<script>
import SideMenu from './components/SideMenu';
import bus from './components/bus.js';
export default {
  name: 'app',
  data:function(){
    return {
      isShow:false
    }
  },
  // 局部注册组件
  components:{
    SideMenu
  },
  mounted:function(){
    bus.$on('showMenu',()=>{
      console.log('hahhahahahh');
      this.isShow = true;
    })
  }
}
</script>

<style>
  html{
    height: 100%;
  }
  body{
    margin:0;
    height: 100%;
  }
  #app{
    height:100%;
  }
  .side-enter{
    opacity: 0;
    transform: translateX(-100%);
  }
  .side-enter-active{
    transition: all 1s;
  }
  .side-leave-active{
    opacity: 0;
    transform: translateX(-100%);
    transition: all 1s ;
  }
</style>
